<template>
  <el-dialog
    v-model="dialog.visible"
    :title="dialog.title"
    width="1000"
    @close="closeDialog"
  >
    <el-form
      :model="form"
      ref="formRef"
      label-width="100px"
      class="demo-dynamic"
    >
      <el-form-item>
        <el-form-item label="组织名称" prop="Org">
          <dictionary
            style="width: 100px"
            v-model="form.Org"
            type-code="orgId"
          />
        </el-form-item>
      </el-form-item>
      <el-form-item
        v-for="(domain, index) in form.domains"
        label="物料"
        :key="domain.key"
        :prop="'domains.' + index + '.Code'"
      >
        <div class="input-row">
          <el-input type="text" placeholder="物料编码" v-model="domain.Code" />
          <el-input
            type="number"
            placeholder="物料数量"
            v-model="domain.Number"
          />
          <el-button @click.prevent="removeDomain(domain)">删除</el-button>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button @click="addDomain()">新增物料</el-button>
        <el-button @click="resetForm()">重置</el-button>
        <el-button type="primary" @click="submitForm()">导出</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { allBudget } from "@/api/forecast";

defineOptions({
  name: "AllBudget",
  inheritAttrs: false,
});

/** 导出的方法 **/
defineExpose({
  closeDialog,
  openDialog,
});

const PageResult = ref([]);
const form = reactive({ Org: "", domains: [{ Code: "", Number: 0 }] }); // 表单
const loading = ref(false);
const formRef = ref(ElForm); // 表单
let queryParams = {
  pageNum: 1,
  pageSize: 10,
};
let total = ref(0);
// 弹窗对象
const dialog = reactive({
  visible: false,
  type: "form",
  width: 800,
  title: "",
});
/** 关闭弹窗 **/
function closeDialog() {
  dialog.visible = false;
}
/** 开启弹窗 **/
function openDialog(title: string) {
  dialog.title = title;
  dialog.visible = true;
}

const submitForm = () => {
  try {
    allBudget(form).then((response) => {
      loading.value = true; // 加载窗口
      const blob = new Blob([response.data], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      });
      const fileName = "allBudget.xlsx";
      const link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      window.URL.revokeObjectURL(link.href);
    });
  } catch (error) {
    console.error("下载文件出现错误：", error);
  } finally {
    loading.value = false;
  }
};
const resetForm = () => {
  formRef.value.resetFields();
};
// 新增域名方法
const addDomain = () => {
  form.domains.push({
    Code: "",
    Number: 0,
  });
};
onMounted(() => {});
// 删除域名方法
const removeDomain = (item: any) => {
  const index = form.domains.findIndex((d) => d === item);
  if (index !== -1) {
    form.domains.splice(index, 1);
  }
};
</script>

<style scoped>
.input-row {
  /* 将包含input框的容器设置为行内块元素排列方式 */
  display: flex;
  justify-content: space-between;
}

.input-row el-input {
  /* 将input框本身设置为行内块元素 */
  display: inline-block;
  width: 45%; /* 根据需要调整每个input框的宽度占比 */
}
</style>
